<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>径向渐变色</title>
    <style>
        *{margin: 0;padding: 0;}
    </style>
</head>
<body style="height: 100%">
<canvas id="canvas" style="border:1px solid gray;height: 100%">该浏览器不支持canvas,请更换浏览器后重试</canvas>
</body>
<script>
    var CANVAS_WINDTH = document.body.clientWidth;
    var CANVAS_HEIGHT = document.body.clientHeight;
    window.onload =function () {
        var canvas = document.getElementById("canvas");
        canvas.width = CANVAS_WINDTH;
        canvas.height = CANVAS_HEIGHT;
        var cxt = canvas.getContext('2d');
        var linegrad = cxt.createRadialGradient(400,400,0,400,400,350);
        linegrad.addColorStop(0.0,"#fff");
        linegrad.addColorStop(0.3,"#058");
        linegrad.addColorStop(0.6,"green");
        linegrad.addColorStop(0.8,"yellow");
        linegrad.addColorStop(1.0,"#000");
        cxt.fillStyle = linegrad;
        cxt.fillRect(0,0,800,800);
    }

</script>
</html>